<template>
	<view class="content">
		<view class="content-top">
			<header class="page-header">
				<view class="header-middle container">
					<view class="header-panel-center">
						<a class="logo" href="https://greenwealth.com/" title="">
							<img class="main-logo hidden-xs" src="@/static/image/main-logo.png" alt="">
						</a>
					</view>
				</view>
			</header>
			<view class="swiper-box">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration" indicator-color="#ccc" indicator-active-color="#666">
					<swiper-item v-for="(item,index) in imgList" :key="item.value">
						<a href="javascript:void(0);">
							<img class="main-logo hidden-xs" :src="item.url" alt="">
						</a>
					</swiper-item>
				</swiper>
			</view>
			<view class="center-box-one mb50">
				<view class="center-box-text1">Verify Your Products</view>
				<view class="center-box-ver1">
					<img src="@/static/image/qr-greenwealth.jpg" alt="">
					<button type="button" class="btn btn-success" @click="linkClick">
						<a href="https://greenwealth.accessreal.com/gwscan/" target="_blank" rel="nofollow">
							<strong>CLICK HERE TO VERIFY</strong>
						</a>
					</button>
				</view>
				<view class="center-box-text2">To verify the scratch and scan the QR code products</view>
				<view class="center-box-ver1">
					<img src="@/static/image/code-greenwealth.jpg" alt="">
					<button type="button" class="btn btn-success" @click="successClick">
						<a href="javascript:void(0);" target="_blank" rel="nofollow">
							<strong>CLICK HERE TO VERIFY</strong>
						</a>
					</button>
				</view>
				<view class="center-box-text3">To verify the scratch and new secret code products</view>
				<view class="text-center">
					<p><b>Note:</b> For a limited time, there is a possibility
						that you will receive either of these products*</p>
				</view>
			</view>
			<view class="center-box-one">
				<view class="page-titlle">3 Key Factors</view>
				<view class="page-title-sub">Ultimate hair care at affordable price!</view>
				<view class="center-box-one-content">
					<view class="center-box-one-img">
						<img src="@/static/image/img1.jpg" alt="">
					</view>
					<view class="center-box-one-img">
						<img src="@/static/image/img2.jpg" alt="">
					</view>
					<view class="center-box-one-img">
						<img src="@/static/image/img3.jpg" alt="">
					</view>
				</view>
			</view>
			<view class="center-box-two">
				<view class="page-two-titlle1">Ingredients Drawn From the Land of Organics!</view>
				<view class="page-two-text center">Green Wealth Neo Hair Lotion is made from extracts from herbs to
					touch the main ingredient. Cantaloupe, white ginseng, palm leaf, saw blade provides hair care for
					hair loss.</view>
				<view class="center-box-two-img">
					<img src="@/static/image/img4.jpg" alt="">
				</view>
				<view class="page-two-titlle2">CUCUMIS MELO EXTRACT</view>
				<view class="page-two-text">Neo Hair Lotion uses Cucumis Melo Extract which is a form of Vitamin B which
					is required to prevent hair loss and promote hair growth. This vitamin is mostly found in citrus
					fruits except for lemons. Cantaloupe which is also known as Cucumis Melo Extract is well used in Neo
					Hair Lotion and regular usage stimulates hair growth. It promotes hair growth for improving hair
					strength.</view>
				<view class="center-box-two-img">
					<img src="@/static/image/img5.jpg" alt="">
				</view>
				<view class="page-two-titlle2">SAW PALMETTO</view>
				<view class="page-two-text">Saw palmetto is a natural remedy used to treat hair loss. It’s a plant with
					small berries that has been used by Native Americans as medicine and food for hundreds of years. An
					extract of saw palmetto berries blocks 5-alpha-reductase, an enzyme that converts testosterone to
					DHT. DHT is the molecule responsible for hair loss.</view>
				<view class="center-box-two-img">
					<img src="@/static/image/img6.jpg" alt="">
				</view>
				<view class="page-two-titlle2">EQUISETUM ARVENSE EXTRACT</view>
				<view class="page-two-text">Equisetum Arvense Extract which is also Known as horsetail promotes healthy
					hair based on its silicon content, impact on collagen, antioxidant properties. Horsetail in Neo Hair
					Lotion has natural silica which provides resistance to hair breaking, improved hair strength and
					growth. It is useful for cleaning, reduces dandruff and boosts scalp circulation. It also stops
					hairs loss and generate new hair growth.</view>
				<view class="center-box-two-img">
					<img src="@/static/image/img7.jpg" alt="">
				</view>
				<view class="page-two-titlle2">GINSENG RADIX ALBA</view>
				<view class="page-two-text">Ginseng extract stimulates the circulation of cells in the scalp. Give hair
					roots get nutrients. The hair root effect is awake. It accelerates germination and nourishes hair
					roots. And reduce the loss of hair.</view>
			</view>
			<view class="center-box-three mb50">
				<view class="center-box-two-img">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="false"
						:interval="interval" :duration="duration" indicator-color="#ccc" indicator-active-color="#666">
						<swiper-item v-for="(item,index) in swiperList" :key="item.value">
							<a href="javascript:void(0);">
								<view class="swiper-item">
									<view class="swiper-item-img">
										<img :src="item.url" alt="">
									</view>
									<view class="swiper-item-box">
										<view class="product-item-name"> {{item.name}}</view>
										<view class="rating-summary" v-if="item.start">
											<img src="@/static/image/start.png" alt="">
										</view>
										<view class="price-container">
											AED &nbsp; {{item.price}}
										</view>
										<view class="minimal-price-link" v-if="item.priceNmae">
											<view class="price-label">As low as</view>
											<view class="price-wrapper">AED {{item.priceName}}</view>
										</view>
									</view>
									<view class="product-item-inner">
										<view title="Add to Cart" class="action-tocart-primary">
											<span>Add to Cart</span>
										</view>
									</view>
								</view>
							</a>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="center-box-four mb50">
				<view class="page-titlle">Recent Posts</view>
				<view class="center-box-four-img">
					<!-- <swiper class="swiper-box" @change="swiperChange" :next-margin="platformType===2?'20rpx':'40rpx'" :previous-margin="platformType===2?'20rpx':'40rpx'"> -->

					<swiper class="swiper" circular :indicator-dots="indicatorDotsNew" :autoplay="false"
						:interval="interval" :duration="duration" indicator-color="#ccc" indicator-active-color="#666"
						:next-margin="platformType===2?'10rpx':'150rpx'"
						:previous-margin="platformType===2?'10rpx':'10rpx'">
						<swiper-item v-for="(item,index) in imgShopList" :key="item.value">
							<a href="javascript:void(0);">
								<view class="swiper-item">
									<view class="swiper-item-img">
										<img :src="item.url" alt="">
									</view>
									<view class="swiper-item-box">
										<img src="@/static/image/list-icon1.png" alt="">
										<img src="@/static/image/list-icon2.png" alt="">
										<img src="@/static/image/list-icon3.png" alt="">
									</view>
								</view>
							</a>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="center-box-five mb50">
				<img src="@/static/image/falcon-pharmacy.png" alt="">
			</view>
		</view>
		<view class="content-bottom">
			<view class="center-box-five mb50">
				<img src="@/static/image/more.png" alt="">
			</view>
			<view class="center-box-five">
				<img src="@/static/image/message.png" alt="">
			</view>
			<view class="center-box-six">
				<view class="center-box-six-title" @click="InformationClick">
					<text>Information</text>
					<img src="@/static/image/right-icon.png" :class="InformationFlag ? 'rotateTitle' : ''" alt="">
				</view>
				<!--  -->
				<view class="center-box-six-box" v-if="InformationFlag">
					<view class="">About Us</view>
					<view class="">Blog</view>
					<view class="">FAQ's</view>
					<view class="">Contact Us</view>
				</view>
			</view>
			<view class="center-box-six">
				<view class="center-box-six-title" @click="CustomerClick">
					<text>Customer Suport</text>
					<img src="@/static/image/right-icon.png" :class="CustomerFlag ? 'rotateTitle' : ''" alt="">
				</view>
				<view class="center-box-six-box" v-if="CustomerFlag">
					<view class="">Terms & Conditions</view>
					<view class="">Refund Policy</view>
					<view class="">Shipping & Returns</view>
					<view class="">Privacy Policy</view>
				</view>
			</view>
			<view class="center-box-seven mb50">
				<img src="@/static/image/fillout.png" alt="">
				<view class="uni-input-box">
					<input class="uni-input" v-model="emailText" maxlength="10"
						placeholder="Enter your email address" />
				</view>
				<view class="uni-input-btn" @click="btnClick"></view>
			</view>
			<view class="center-box-eight mb50">
				<view class="centesr-box-eight-text">
					<text>Refer & Earn</text>-
					<text>Wholesale Registration</text>-
					<text>All About Hair</text>
				</view>
				<view class="centesr-box-eight-message">©2024 Paradise International General Trading LLC, All Rights
					Reserved.</view>
			</view>
			<view class="center-box-nine mb50">
				<img src="@/static/image/bottom.png" alt="">
			</view>
		</view>
		<view class="mask" v-if="VerifyFlag" @click="closeClick"></view>
		<view class="modal-inner-wrap" :class="VerifyFlag ? 'modal-inner-wrap-move' : ''">
			<view class="modal-close" @click="closeClick">
				<img src="@/static/image/close.png" alt="">
			</view>
			<view v-if="success" class="modal-start">
				<view class="inner-title">Product<br /> Verification</view>
				<view class="inner-step">
					<p>1. Find the Secret code on the top of the box.</p>
					<p>2. Enter the 16-digit<br /> security code</p>
				</view>
			</view>
			<view class="form-box-content" v-if="success">
				<view class="form-box form-box-place">
					<input class="uni-input" v-model="codeText" maxlength="30"
						placeholder="Enter your 16 digit security code" />
					<view class="sub-btn" @click="subClick">Verify</view>
				</view>
			</view>
			<view v-if="!success" class="modal-success">
				<view class="inner-title">Green Wealth Neo Hair Lotion 120 ML Made In Thailand</view>
				<view class="inner-img">
					<img src="@/static/image/success1.png" alt="">
					<img src="@/static/image/success2.png" alt="">
				</view>
				<view class="inner-tips">
					<!-- <text>Find</text> <br/>the Secret of <br/><text>the box</text> -->
					<img src="@/static/image/success-tips.png" alt="">
				</view>
				<view class="inner-step">
					<p class="red">Please enter the below details to know about offers from us!</p>
				</view>
				<view class="form-box">
					<input class="uni-input" v-model="name" maxlength="30" placeholder="Customer Name" />
					<input class="uni-input" v-model="pass" maxlength="30" placeholder="05XXXXXXXX" />
					<view class="sub-btn-email" @click="VerifyClick">Subscribe</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				inputClearValue: 0,
				inputValue: 0,
				imgList: [{
					url: require('@/static/image/mweb_banner1.jpg'),
					value: 1
				}, {
					url: require('@/static/image/mweb_banner2.jpg'),
					value: 2
				}, {
					url: require('@/static/image/mweb_banner3.jpg'),
					value: 3
				}, {
					url: require('@/static/image/mweb_banner4.jpg'),
					value: 4
				}, {
					url: require('@/static/image/mweb_banner5.jpg'),
					value: 5
				}],
				swiperList: [{
					url: require('@/static/image/img8.png'),
					start: 5,
					name: 'Green Wealth Neo Hair Lotion 120 ML Made In Thailand',
					price: "125.00",
					priceNmae: "95.00",
				}, {
					url: require('@/static/image/img9.png'),
					start: 0,
					name: ' Ghori Derma Roller System',
					price: "15.00",
					priceNmae: "",
				}, {
					url: require('@/static/image/img10.png'),
					start: 5,
					name: ' ROSEMARY, MINT & BIOTIN Oil',
					price: "50.00",
					priceNmae: "40.00",
				}, {
					url: require('@/static/image/img11.png'),
					start: 5,
					name: 'SUPER DEAL - Green Wealth Neo Hair Lotion, ROSEMARY, MINT & BIOTIN Oil, Derma Roller',
					price: "170.00",
					priceNmae: "",
				}],
				imgShopList: [{
					url: require('@/static/image/list7.png'),
					value: 1
				}, {
					url: require('@/static/image/list8.png'),
					value: 2
				}, {
					url: require('@/static/image/list9.png'),
					value: 3
				}, {
					url: require('@/static/image/list10.png'),
					value: 4
				}, {
					url: require('@/static/image/list11.png'),
					value: 5
				}],
				InformationFlag: false,
				CustomerFlag: false,
				VerifyFlag: false,
				platformType: false,
				success: true,
				indicatorDotsNew: false,
				url: 'http://www.greenwealthn.com/',
				codeText: '',
				emailText: '',
				name: '',
				pass: ''
			}
		},
		onLoad() {

		},
		methods: {
			clearIcon() {
				this.inputValue = this.inputClearValue * 750 * 2 / 780;
				console.log(this.inputClearValue)
			},
			InformationClick() {
				this.InformationFlag = !this.InformationFlag
			},
			CustomerClick() {
				this.CustomerFlag = !this.CustomerFlag
			},
			subClick() {
				if (!this.codeText) {
					uni.showToast({
						title: 'Please fill in the verification code first',
						icon: 'error',
						duration: 2000
					});
					return false
				}
				uni.request({
					// url: 'http://www.greenwealthn.com/goods/info/scan/123', //仅为示例，并非真实接口地址。
					// url: this.url + '/goods/info/scan/' + this.codeText, //仅为示例，并非真实接口地址。
					url: '/goods/info/scan/' + this.codeText, //仅为示例，并非真实接口地址。
					// url: 'http://www.greenwealthn.com/goods/info/scan/'+ this.codeText, //仅为示例，并非真实接口地址。
					data: {},
					header: {
						'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						if (res.data.code === 0) {
							this.success = false
						}else if(res.data.code === 301){
							uni.showToast({
								title: 'The verification code has been verified',
								icon: 'error',
								duration: 2000
							});
							this.success = true
						} else if (res.data.code === 500) {
							uni.showToast({
								title: 'The verification code does not exist',
								icon: 'error',
								duration: 2000
							});
							this.success = true
						}
					}
				});
			},
			closeClick() {
				this.codeText = ''
				this.success = true
				this.VerifyFlag = false
			},
			successClick() {
				let domain = window.location.hostname;
				if (window.location.protocol === 'http:') {
					this.url = 'http://' + domain
				} else {
					this.url = 'https://' + domain
				}
				console.log(this.url,'this.url')
				this.VerifyFlag = true
			},
			linkClick(){
				uni.navigateTo({
					url: '/pages/getCode/getCode'
				})
			},
			btnClick() {
				this.emailText = ''
			},
			VerifyClick() {
				this.name = ''
				this.pass = ''
				this.VerifyFlag = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("index.scss");
</style>